import React, {useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {Button, Switch, message} from 'antd';
import { PlusOutlined} from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import ConfigFrom from "@/pages/Maintenance/DeveConfig/components/ConfigFrom";
import {getConfig} from "@/services/ant-design-pro/config";
import {history} from "@@/core/history";


export type Status = {
  color: string;
  text: string;
};





const getData = async (params) => {
  const response = await getConfig(params)
  console.log(response)
  return{
    data:response
  }
}

const columns: ProColumns[] = [

  {
    title:'ID',
    search: false,
    align: 'center',
    dataIndex: 'id',
    width: 48,
  },
  {
    title: '分类名称',
    width: 120,
    search: true,
    align: 'center',
    dataIndex: 'nickname',

  },
  {
    title: '分类字段',
    width: 120,
    align: 'center',
    search: false,
    dataIndex: 'name',

  },

  {
    title: '状态',
    dataIndex: 'status',
    filters: true,
    onFilter: true,
    search: true,
    align: 'center',
    valueType: 'select',
    width: 100,
    render: (_,record) =>
      <Switch
        defaultChecked={record.status === 1}
        checkedChildren="上架"
        unCheckedChildren="下架"
        onChange={async (state) => {
          console.log(state);
        }
        }
      />
  },


  {
    title: '操作',
    width: 164,
    key: 'option',
    valueType: 'option',
    render: () => [
      <a onClick={() => history.push('/maintenance/deveconfig/configurationlist')} key="1">配置列表</a>,
      <a key="2">编辑</a>,
      <a key="3">删除</a>,
    ],
  },
];


const Collocation = ()=>{

  const [modalVisible, setModalVisible] = useState(false);



  return (
    <div>
      <PageContainer
        header={{
          title: '配置分类',
          breadcrumb: {},
        }}
      >
        <ProTable
          columns={columns}
          request={async () => {
            return getData();
          }}
          rowKey="id"
          pagination={{
            showQuickJumper: true,
          }}
          // expandable={{ expandedRowRender }}
          search={true}
          dateFormatter="string"
          headerTitle={
            <div>
              <Button icon={<PlusOutlined/>} onClick={()=>{setModalVisible(true)}} key="primary" type="primary">
                创建应用
              </Button>

            </div>
          }
          options={false}
          toolBarRender={() => [

          ]}
        />
        <ConfigFrom isModalVisible={modalVisible} handleOk={()=>{setModalVisible(false)}} handleCancel={()=>{setModalVisible(false)}}/>
      </PageContainer>
    </div>
  );
}

export default Collocation;
